<div class="layui-fluid">
    <div class="layui-card">
        <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="dev-page-search-form" id="dev-page-search-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        <script type="text/html" template>
                            {{layui.admin.setFormSelectTitleLang('dev-page-search-form','Module')||''}}
                        </script>
                    </label>
                    <div class="layui-input-inline">
                        <script type="text/html" template lay-url="/Admin/getPageSelect"
                                lay-data="{order: 'OrderNo', SearchWhere: JSON.stringify([{ searchValue: 'module,os', compare: 'PageType',condition:'inchar' }])}"
                                lay-type="post" lay-done="layui.form.render('select', 'dev-page-search-form')">
                            <select name="Module" compare="ParentID">
                                <option value="">{{layui.admin.setFormSelectLang('dev-page-search-form','Module')||''}}</option>
                                {{#  layui.each(d.data, function(index, item){ }}
                                <option value="{{ item.PageID }}">{{ item['PageName'+layui.admin.lang] }}</option>
                                {{#  }); }}
                            </select>
                        </script>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">
                        <script type="text/html" template>
                            {{layui.admin.setFormSelectTitleLang('dev-page-search-form','Menu')||''}}
                        </script>
                    </label>
                    <div class="layui-input-inline">
                        <script type="text/html" template lay-url="/Admin/getPageSelect"
                                lay-data="{order: 'OrderNo', SearchWhere: JSON.stringify([{ searchValue: 'page', compare: 'PageType',condition:'=' }])}"
                                lay-type="post" lay-done="layui.form.render('select', 'dev-page-search-form')">
                            <select name="Menu" compare="ParentID">
                                <option value="">{{layui.admin.setFormSelectLang('dev-page-search-form','Menu')||''}}</option>
                                {{#  layui.each(d.data, function(index, item){ }}
                                <option value="{{ item.PageID }}">{{ item['PageName'+layui.admin.lang] }}</option>
                                {{#  }); }}
                            </select>
                        </script>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">
                        <script type="text/html" template>
                            {{layui.admin.setFormSelectTitleLang('dev-page-search-form','PageType')||''}}
                        </script>
                    </label>
                    <div class="layui-input-inline">
                        <script type="text/html" template>
                            <select name="PageType" condition="=" compare="PageType" lay-done="layui.form.render('select', 'dev-page-search-form')">
                                <option value="">{{layui.admin.setFormSelectLang('dev-page-search-form','PageType')||''}}</option>
                                {{#  layui.admin.getDataParams('page-pageType', function(d){layui.each(d,function(idx,item){ }}
                                <option value="{{ item.Member }}">{{ item['MemberName'+layui.admin.lang] }}</option>
                                {{#  })}) }}
                            </select>
                        </script>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <input type="text" name="PageName" condition="like" compare="PageName,PageName_EN,PageUrl,ActionUrl,Sign" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </form>
        <div class="layui-card-body">
            <table id="dev-page-table" lay-filter="dev-page-table"></table>
            <script type="text/html" id="dev-page-toolbar">
                {{#
                var html=layui.admin.getPageToolbarBtn('dev-page', { 'Sign': ['edit', 'del'] });
                    if(d.PageType == 'os')
                        html+=layui.admin.getPageToolbarBtn('dev-page', { 'Sign': 'addModule' });
                    if(d.PageType == 'module')
                        html+=layui.admin.getPageToolbarBtn('dev-page', { 'Sign': ['addModule', 'addPage'] });
                    if(d.PageType == 'page')
                        html+=layui.admin.getPageToolbarBtn('dev-page', { 'Sign': ['addArea'] });
                    if(d.PageType == 'page'||d.PageType == 'area'&&d.AreaType=='list')
                        html+=layui.admin.getPageToolbarBtn('dev-page', { 'Sign': ['addAction','addCellAction','addFormAction'] });
                    if(d.PageType == 'area' && d.AreaType=='form')
                        html+=layui.admin.getPageToolbarBtn('dev-page', { 'Sign': ['addFormAction'] });
                    return html;
                }}
            </script>
        </div>
    </div>
</div>

<script>
    layui.use( 'reTreeGrid', function () {
        var $ = layui.$
            , reTreeGrid = layui.reTreeGrid
            , reForm = layui.reForm
            , admin = layui.admin;

        var options = {
            tableId: 'dev-page'
            , autoToolbar: false
            , tableOptions: {
                url: '/Admin/getPageList'
                , where: { order: 'OrderNo' }
                , idField: 'PageID'
                , treeId: 'PageID'
                , treeUpId: 'ParentID'
                , treeShowName: 'PageName'
                , cellMinWidth: 200
                , cols: [[
                    { type: 'checkbox' }
                    , { field: 'OS', title: '系统', width: 110 }
                    , { field: 'PageName', title: '名称' }
                    , { field: 'PageName_EN', title: '英文名' }
                    //, { field: 'ActionUrl', title: '请求', width: 280 }
                    , { field: 'Sign', title: '标识', width: 220 }
                    , { field: 'OrderNo', title: '排序', align: 'center', width: 80 }
                    , {
                        field: 'PageType', title: '页面类型', align: 'center', width: 120
                        , templet: function (d) { return admin.getDataParamsMember('page-pageType', d.PageType); }
                    }
                    , {
                        field: 'AreaType', title: '区域类型', align: 'center', width: 120
                        , templet: function (d) { return admin.getDataParamsMember('page-areaType', d.AreaType); }
                    }
                    , { field: 'AreaCols', title: '区域占比', align: 'center', width: 90 }
                    , { field: 'TemplateUrl', title: '模板', width: 200 }
                    , { field: 'PageUrl', title: '地址', width: 280 }
                    , {
                        field: 'PageIcon', title: '图标', align: 'center', width: 140
                        , templet: function (d) { return admin.getDataParamsMember('page-pageIcon', d.PageIcon); }
                    }
                    , { field: 'Remarks', title: '描述' }
                    , { title: admin.operationCell, width: 380, fixed: 'right', toolbar: '#dev-page-toolbar' }
                ]]
            }
            , delUrl: '/Admin/delPage'
            , toolFun: {
                addModule: function (d) {
                    reForm.popupForm({
                        title: admin.getToolFormTitle('dev-page', 'addModule')
                        , formLay: 'dev-page-form'
                        , url: 'admin/dev/pageForm'
                        , subUrl: '/Admin/savePage'
                        , initData: { PageType: 'os' }
                        , done: function (res) {
                            reTreeGrid.tableSearch('dev-page'); 
                        }
                    })
                }
            }
            , toolbarFun: {
                addModule: function (d) {
                    reForm.popupForm({
                        title: admin.getToolbarFormTitle('dev-page','addModule')
                        , formLay: 'dev-page-form'
                        , url: 'admin/dev/pageForm'
                        , subUrl: '/Admin/savePage'
                        , initData: { ParentID: d.PageID, PageType: 'module' }
                        , done: function (res) {
                            reTreeGrid.tableSearch('dev-page'); 
                        }
                    })
                }
                , addPage: function (d) {
                    reForm.popupForm({
                        title: admin.getToolbarFormTitle('dev-page', 'addPage')
                        , formLay: 'dev-page-form'
                        , url: 'admin/dev/pageForm'
                        , subUrl: '/Admin/savePage'
                        , initData: { ParentID: d.PageID, PageType: 'page' }
                        , done: function (res) {
                            reTreeGrid.tableSearch('dev-page'); 
                        }
                    })
                }
                , addArea: function (d) {
                    reForm.popupForm({
                        title: admin.getToolbarFormTitle('dev-page', 'addArea')
                        , formLay: 'dev-page-form'
                        , url: 'admin/dev/pageForm'
                        , subUrl: '/Admin/savePage'
                        , initData: { ParentID: d.PageID, PageType: 'area' }
                        , done: function (res) {
                            reTreeGrid.tableSearch('dev-page'); 
                        }
                    })
                }
                , addAction: function (d) {
                    reForm.popupForm({
                        title: admin.getToolbarFormTitle('dev-page', 'addAction')
                        , formLay: 'dev-page-form'
                        , url: 'admin/dev/pageForm'
                        , subUrl: '/Admin/savePage'
                        , initData: { ParentID: d.PageID, PageType: 'action' }
                        , done: function (res) {
                            reTreeGrid.tableSearch('dev-page'); 
                        }
                    })
                }
                , addCellAction: function (d) {
                    reForm.popupForm({
                        title: admin.getToolbarFormTitle('dev-page', 'addCellAction')
                        , formLay: 'dev-page-form'
                        , url: 'admin/dev/pageForm'
                        , subUrl: '/Admin/savePage'
                        , initData: { ParentID: d.PageID, PageType: 'cellAction' }
                        , done: function (res) {
                            reTreeGrid.tableSearch('dev-page'); 
                        }
                    })
                }
                , addFormAction: function (d) {
                    reForm.popupForm({
                        title: admin.getToolbarFormTitle('dev-page', 'formAction')
                        , formLay: 'dev-page-form'
                        , url: 'admin/dev/pageForm'
                        , subUrl: '/Admin/savePage'
                        , initData: { ParentID: d.PageID, PageType: 'formAction' }
                        , done: function (res) {
                            reTreeGrid.tableSearch('dev-page');
                        }
                    })
                }
            }
            , formOptions: {
                url: 'admin/dev/pageForm'
                , subUrl: '/Admin/savePage'
            }
        }

        reTreeGrid.initTreeGrid(options);
    });
</script>